<template>
  <div class="login-box login-bg relative">
    <image class="width100 login-bg absolute" :src="bg" mode="widthFix"  />
    <i class="icon icon-logo"></i>
    <form>
      <view class="section flex-box">
        <i class="label icon icon-user"></i>
        <input maxlength="11" class="flex-1" name="tel" v-model="tel" type="number" placeholder="请输入手机号" />
      </view>
      <view class="section flex-box">
        <i class="label icon icon-safe"></i>
        <input class="flex-1" name="imgCode" maxlength="4" v-model="imgCode" type="number" placeholder="请输入图形验证码" />
        <!-- <image class="code code-img" :src="codeImg" @tap="getImgCode" /> -->
        <canvas @tap="getImgCode" class="code code-img" canvas-id="canvas"></canvas>
      </view>
      <view class="section flex-box relative">
        <i class="label icon icon-msg"></i>
        <input class="flex-1" name="numcode" maxlength="6" v-model="numcode" type="number" placeholder="请输入短信验证码" />
        <view class="code code-btn" @tap="getNumCode" >获取验证码</view>
        <span v-if="codeBtnLoading" class="btn-mask">{{countDown}}秒后重试</span>
      </view>
      <div class="btn-box text-center">
        <view class="btn-full" @tap="formSubmit">{{wxcode ? '绑定并登录' : '登录'}}</view>
      </div>
    </form>
    <!-- <div v-if="!wxcode" class="wx-login text-center m-auto" @tap="wxLogin">
      <i class="icon icon-wxchat"></i>
      <p class="tint font14">微信快捷登录</p>
    </div> -->
  </div>
</template>

<script>
import login from '@/interface/login'
import Mcaptcha from '@/utils/Mcaptcha'
import getNumCode from '@/interface/getNumCode'
import checkNumCode from '@/interface/checkNumCode'
import dialog from '@/utils/dialog'
import valid from '@/utils/valid'
export default {
  components: {},
  data () {
    return {
      bg: require('@/images/pages/login-bg.png'),
      wxcode: '',
      codeBtnLoading: false,
      tel: '',
      numcode: '',
      realNumCode: '',
      codeImg: '',
      imgCode: '',
      realImgcode: '',
      countDown: 30,
      mcaptcha: null
    }
  },
  methods: {
    countDownRun (fun) {
      let clearFun = () => {
        clearInterval(timer)
        fun && fun()
        this.countDown = 30
      }
      let timer = setInterval(() => {
        if (this.countDown <= 1) {
          clearFun()
        }
        this.countDown--
      }, 1000)
      return clearFun
    },
    getRandom () {
      let num = new Date().getMilliseconds() + '' + Math.floor(Math.random() * 10)
      num = num.padStart(4, 0)
      this.realImgcode = num
      return num
    },
    getImgCode () {
      this.mcaptcha.refresh(this.getRandom())
    },
    async getNumCode () {
      if (!valid.isPhone(this.tel)) { return }
      const imgCode = this.imgCode.trim()
      if (!imgCode) { return dialog.showToast('请填写图形验证码') }
      if (imgCode !== this.realImgcode) { return dialog.showToast('图形验证码填写错误') }

      this.codeBtnLoading = true
      let clearFun = this.countDownRun(() => { this.codeBtnLoading = false })
      getNumCode({
        iphone: this.tel
      }).catch((msg) => {
        dialog.showToast(msg || '短信发送失败')
        clearFun()
      })
    },
    checkNumCode () {
      return checkNumCode({
        iphone: this.tel,
        code: this.numcode
      }).catch(msg => {
        dialog.showToast(msg || '短信验证码输入不正确')
        throw new Error()
      })
    },
    async formSubmit () {
      if (!valid.isPhone(this.tel)) { return }
      const imgCode = this.imgCode.trim()
      if (!imgCode) { return dialog.showToast('请填写图形验证码') }
      if (imgCode !== this.realImgcode) { return dialog.showToast('图形验证码填写错误') }
      if (!this.numcode) { return dialog.showToast('请填写验证码') }
      await this.checkNumCode()

      const queryData = {
        tel: this.tel,
        numcode: this.numcode,
        wxcode: this.wxcode
      }
      login(queryData).then(v => {
        uni.isRedirect = false // 重定向设为无
        this.navigateBack()
      })
    },
    wxLogin () {
      uni.login({
        success: res => {
          uni.redirectTo({
            url: `/pages/login/main?wxcode=${res.code}`
          })
        }
      })
    },
    initializeCanvas(){
      const selector = uni.createSelectorQuery();
      const canvas = selector.select('.code.code-img');
      canvas.boundingClientRect(data => {
        this.mcaptcha = new Mcaptcha({
          el: 'canvas',
          width: data.width,
          height: data.height,
          code: this.getRandom()
        })
        this.getImgCode()
      }).exec();
    }
  },
  mounted () {
    this.initializeCanvas();
    // const query = this.$root.$mp.query
    // this.wxcode = query.wxcode
  }
}
</script>

<style lang="less">
.login-box {
  padding: 100upx 56upx 0;
  font-size: 28upx;
}
.login-box.login-bg {
  height: 100%;
  background-position: bottom;
}
.login-box .icon-logo {
  display: block;
  width: 218upx;
  height: 88upx;
  margin: 0 auto;
  margin-bottom: 110upx;
}
.login-box input,
.login-box input:focus {
  line-height: 64upx;
  height: 64upx;
  color: #333;
}
.login-box .section {
  align-items: center;
  padding: 30upx 0 14upx;
  border-bottom: 2upx solid #efefef;
}
.login-box .section .label {
  margin-right: 28upx;
}
.login-box .section .icon {
  width: 32upx;
}
.login-box .section .icon-user {
  height: 36upx;
}
.login-box .section .icon-safe {
  height: 34upx;
}
.login-box .section .icon-msg {
  height: 32upx;
}
.login-box .section .code {
  width: 166upx;
  height: 52upx;
  line-height: 56upx;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 0 0 2upx #999;
}
.login-box .section .code-btn {
  color: #666;
  font-size: 24upx;
  padding: 0;
}
.login-box .section .btn-mask {
  position: absolute;
  right: -2upx;
  top: 34upx;
  width: 172upx;
  height: 58upx;
  line-height: 56upx;
  text-align: center;
  background-color: #fff;
  color: #888;
  font-size: 24upx;
}
.login-box .btn-box {
  margin: 88upx 0 100upx;
}
.login-box .btn-box .btn-full {
  margin-bottom: 30upx;
}
.login-box .wx-login {
  width: 200upx;
  padding: 10upx 0;
}
.login-box .wx-login .icon {
  width: 52upx;
  height: 52upx;
  margin-bottom: 8upx;
}
.login-box .login-bg{
  z-index: -1;
  bottom: 0;
  left: 0;
}

</style>
